<template>
	<div class="share-container">
		<!-- 顶部提示信息 -->
		<div class="tip-box">
			<div class="tip-icon">?</div>
			<div class="tip-text">
				通过邀请链接，店铺提交资料可入驻平台，并且绑定我们的供应商
			</div>
		</div>

		<!-- 邀请链接区域 -->
		<div class="invite-section">
			<div class="invite-title">邀请链接：</div>

			<!-- 链接展示与复制 -->
			<div class="link-box">
				<div class="link-text">{{ inviteLink }}</div>
				<button class="copy-btn" @click="copyLink">复制链接</button>
			</div>

			<!-- 邀请好友按钮 -->
			<button class="invite-btn" open-type="share">邀请好友</button>
		</div>
	</div>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		onLoad,
		onShareAppMessage
	} from "@dcloudio/uni-app";
	import {
		getUserShareLink
	} from "@/api/share";
	import env from "@/utils/vmeitime-http/.env.js";
	// 邀请链接
	const inviteLink = ref(``);
	// 复制链接方法
	const copyLink = () => {
		uni.setClipboardData({
			data: inviteLink.value,
			success: () => {
				uni.showToast({
					title: "链接已复制",
					icon: "success",
				});
			},
		});
	};

	onShareAppMessage(() => {
		return {
			title: "邀请店铺入驻", // 分享的标题
			imageUrl: 'https://cphimg.leyoo888.com/dev/upload/supplier/2025-09-11/1757578056118.jpeg',
			path: `/pages/login/storeShare?id=${supplier_id.value}`, // 分享的页面路径，并携带参数
		};
	});
	const supplier_id = ref(null);
	onLoad((options) => {
		if (options) {
			supplier_id.value = options.id;
			getUserShareLink({
				path: 'pages/login/storeShare',
				query: `id=${supplier_id.value}`,
				env_version: env.env_version,
				wechat_type: 1
			}).then((res) => {
				inviteLink.value = res.openlink;
			})
			// inviteLink.value = `pages/login/storeShare?id=${supplier_id.value}`;
		}
	});
</script>

<style scoped>
	.share-container {
		min-height: 100vh;
		background-color: #f7f7f7;
		padding: 30rpx;
	}

	/* 顶部提示信息样式 */
	.tip-box {
		display: flex;
		align-items: flex-start;
		background-color: #ffffff;
		padding: 30rpx;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
	}

	.tip-icon {
		width: 40rpx;
		height: 40rpx;
		background-color: #f2f2f2;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #999;
		font-size: 28rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.tip-text {
		font-size: 28rpx;
		color: #666;
		line-height: 1.5;
	}

	/* 邀请链接区域样式 */
	.invite-section {
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 30rpx;
	}

	.invite-title {
		font-size: 30rpx;
		color: #333;
		margin-bottom: 30rpx;
	}

	.link-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #f5f5f5;
		border-radius: 40rpx;
		padding: 20rpx 30rpx;
		margin-bottom: 50rpx;
	}

	.link-text {
		font-size: 28rpx;
		color: #999;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.copy-btn {
		background-color: #ffffff;
		color: #1989fa;
		font-size: 28rpx;
		padding: 10rpx 30rpx;
		border-radius: 30rpx;
		border: 1px solid #1989fa;
		margin-left: 20rpx;
	}

	.invite-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #1989fa;
		color: #ffffff;
		font-size: 32rpx;
		border-radius: 45rpx;
		text-align: center;
		border: none;
	}
</style>